@charset "utf-8";
*{
	padding: 0;
	margin: 0;
	text-decoration: none;
	list-style: none;
	font-family: 微软雅黑,sans-serif;
	color: #ffffff;
}

main{
	width: 100%;
	height: auto;
	bor  der: 1px solid red;
	
}

nav{
	width: 100%;
	height: 127px;
	bo   rder: 1px solid red;
}
div#new_wrapper div.nav_left{
	width: 485px;
	height: 127px;
	float: left;
	backgrou  nd-color: aqua;
	margin-left: 280px;

	
}
div#new_wrapper div.nav_left1{
	width: 860px;
	height: 127px;
	float: left;
	border: 1px solid red;
	background-color: #e0e0e0;
	font-size: 20px;
}
div#new_wrapper div.nav_left1 ul li{
	float: left;
	height: 127px;
	line-height: 127px;
	
}
div#new_wrapper div.nav_left1 ul li a{
	border-r    ight: 1px solid red;
	line-height: 127px;
	padding: 0 6px;
}
div#new_wrapper div.nav_left1 ul li a:hover{
    background-color: #ff6700;
	color: #ffffff;
	}
div#new_wrapper div.nav_right {
	width: 369px;
	height: 62px;
	border: 1px solid #e0e0e0;
	float: right;
}
.shangbiao img{
	width:150px;
	height: 84px;
	top: 35px;
	left: 11px;
	position: relative;
}

section{
	width: 100%;
	height: 576px;
	bor   der: 1px solid red;
	
	
}
article{
	width: 500px;
	height: 556px;
	border: 1px solid red;
	background-color: #3f3d3d;
	float: left;
	padding-top: 20px;
}
.right-img{
	width: 1241px;
	height: 556px;
	float: left;
	margin: 0;
	padding: 0;
}
.right-img img{
	width: 104%;
	height: 104%;
	object-fit: cover;
	display: block;
}
div#event_wrapper div.eve_left{
	width: 100%;
	height: auto;
	background-color: transparent;
	margin: 0 ;
	float: none;
	
}
div#event_wrapper div.eve_left ul li{
	float: none;
	width: 100%;
	height: 27px;
	line-height: 27px;
}
div#event_wrapper div.eve_left ul li a{
	display: block;
	line-height: inherit;
	width: 100%;
	height: 100%;
	padding: 0 30px;
	box-sizing: border-box;
	font-size: 24px;
	color: #ffffff;
}
div#event_wrapper div.eve_left ul li a:hover{
    background-color: #ff6700;
	color: #ffffff;
	}
	
	*{
		padding:0;
		margin: 0;
		list-style: none;
	}
	/*1.设置切片：外侧空间*/
	picture{
		width: 100%;
		height: 264px;
		bord   er: 1px solid red;
	}
	div#event_picture{
		width: 100%;
		height: 264px;
		backgr   ound-color: red;
		margin: 0 auto;
	}
	/*3.四张图 浮动  li */
	div#event_picture ul li{
		float: left;
	}
	/*4.1 抓4张图片，统一设置宽高*/
	div#event_picture ul li img{
		width: 396px;
		height: 264px;
	}
	/*4.2 四张图片的空间*/
	div#event_picture ul li{
		margin-left: 15px;
		margin-top: 1px;
	}
	/*5.第一张图片：宽、拿下左外边距  伪类选择器：:first-child 抓取第一个元素
	                                        :last-child 抓取最后一个元素
		注意：直接追加li上									
	*/
	div#event_picture ul li:first-child{
		margin-left: 0;
	}
	/*6.所有图片设置下阴影*/
	div#event_picture ul li img:hover{
		filter: drop-shadow(0 0 10px #333);
	}
	*{
		padding: 0;
		margin: 0;
		list-style: none;
		text-decoration: none;
		font-family: 微软雅黑, sans-serif;
		box-sizing: border-box;
	}
	/* 1.单模块边框效果：上边框 背景色 */
	.product-section-title{
		width: 100%;
		color: #333;
		font-size: 23px;
		font-weight: 600;
		margin-bottom: 20px;
		text-align: left;
		padding-left: 10px;
	}
	div.container_star{
		bor  der-top: 1px solid red;
		width: 100%;
		height: auto;
		margin: 30px auto;
		padding: 20px 0;
		background-color: #fafafa;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: flex-star;
	}
	.product-item{
		 width: 234px;
		 text-align: center;
		 padding: 0 10px;
	}
	
	 div.container_star dl dt img{
					bord er: 10px solid red;
					margin: 50px;
				}
	div.container_star dl dd.product_name{
		color: #333;
		font-size: 16px;
		margin: 8px;
	}
	
	
	/* 3. 产品说明位置：外边距：上下 字体颜色 */
	div.container_star dl dd.product_content{
		bor   der: 1px solid red;
		margin: 8px 0;
		color: #b0b0b6;
	}
	div.container_star dl dd.product_price{
					color: #ff6709;  
	}
	
	div.product_intelligence {
		width: 100%;
		height: auto;
		margin: 30px auto;
		padding: 20px 0;
		border-top: 1px solid #eee;
		background-color: #fafafa;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		
	}
	.hardware-group {
	    display: flex; 
	    align-items: flex-start; 
	    gap: 20px; 
		width: 100%;
	    padding: 0 10px; 
		flex: 1;
	}
	.small-modules {
	    display: flex;
	    flex-wrap: wrap; 
	    gap: 15px; 
		flex: 1;
	    
		}
		.product-small {
			flex: 1 0 calc((100% - 3 * 15px) / 4);
		   width: 100%; 
		    height: 100%; 
		    position: relative;
		    border: 1px solid #eee; 
		    border-radius: 4px; 
		    overflow: hidden; 
		    background-color: #fff;
			overflow: hidden;
			
			
		}
		.product-small .img-container {
		    width: 100%;
		    height: 100%;
		}
		.product-small .img-container img {
		    width: 100%;
		    height: 100%;
		    object-fit: cover; 
		    display: block;
		    transition: transform 0.3s; 
		}
		.product-small .product_name {
		    position: absolute;
		    bottom: 80px; 
		    left: 0;
		    width: 100%;
		    text-align: center;
		    color: #333333; 
		    font-size: 25px; 
		    font-weight: 600;
		    margin: 0 auto;
		    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
		}
		.product-small .product_content {
		    position: absolute;
		    bottom: 50px; 
		    left: 0;
		    width: 100%;
		    text-align: center;
		    color: #ffffff;
		    font-size: 16px; 
		    margin: 0;
		    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
		    white-space: nowrap; 
		    overflow: hidden;
		    text-overflow: ellipsis;
		    padding: 0 10px; 
		}
.product-small .product_price {
    position: absolute;
    bottom: 16px; 
    width: 100%;
    text-align: center;
    color: #ff6700; 
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
		.product-small:hover {
		    box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
		}

		
		
	.product-hardware{
		width: auto;
		height: auto;
		position: relative;
		margin-left: 14px;
		border: 1px solid #eee;
		border-radius: 4px;
		overflow: hidden;
		
	}
	.img-container{
		width: 100%;
		height: 100%;
	}
	.product-hardware .img-container img {
	    width: 100%;
	    height: 100%;
	    object-fit: cover; 
	    display: block;
	    border: none; 
	    margin: 0;
	}
	.product-hardware .product_name {
	    position: absolute;
	    top: 30px; 
	    left: 0;
	    width: 100%;
	    text-align: center;
	    color: #000000; 
	    font-size: 22px;
	    font-weight: 600;
	    margin: 0; 
	    text-shadow: 0 2px 4px rgba(0,0,0,0.3); 
	}
	.product-hardware .product_content {
	    position: absolute;
	    top: 70px; 
	    left: 0;
	    width: 100%;
	    text-align: center;
	    color: #000000;
	    font-size: 18px;
	    margin: 0;
	    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
	}
	.product-hardware .product_price {
	    position: absolute;
	    top: 120px; 
	    left: 0;
	    width: 100%;
	    text-align: center;
	    color: #55aaff; 
	    font-size: 25px;
	    font-weight: 600;
	    margin: 0;
	    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
	}
	
	.event_match-title{
		width: 100%;
		    color: #333;
		    font-size: 23px;
		    font-weight: 600;
		    margin-bottom: 20px;
		    text-align: left;
		    padding-left: 10px;
		}
	}
	
	div.event_match{
		width: 100%;
		height: auto;
		margin: 30px auto;
		padding: 10
		px 0;
		border-top: 1px solid #eee;
		background-color: #fafafa;
		
	}
	.match-group{
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
		width: 100%;
		padding: 0 10px;
	}
	.product-match {
	    flex: 1 0 calc((100% - 4 * 12px) / 5); 
	    min-width: 200px; 
	    height: 450px; 
	    position: relative;
	    border: 1px solid #eee;
	    border-radius: 4px; 
	    overflow: hidden;
	    background-color: #fff;
	}
	.product-match .img-container {
	    width: 80%;
	    height: 80%;
	}
	.product-match .img-container img {
	    width: 80%;
	    height: 450px;
	    object-fit: cover;
	    display: block;
	    transition: transform 0.3s;
		}
		
		.product-match .product_name {
		    position: absolute;
		    bottom: 115px;
		    left: 0;
		    width: 100%;
		    text-align: center;
		    color: #fff;
		    font-size: 25px;
		    font-weight: 600;
		    margin: 0;
		    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
		}
		
		.product-match .product_content {
		    position: absolute;
		    bottom: 72px;
		    left: 0;
		    width: 100%;
		    text-align: center;
		    color: #fff;
		    font-size: 20px;
		    margin: 0;
		    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    padding: 0 8px;
			}
			
			.product-match .product_price {
			    position: absolute;
			    bottom: 20px;
			    left: 0;
			    width: 100%;
			    text-align: center;
			    color: #ff6700; /* 小米标准橙色，统一价格颜色 */
			    font-size: 16px;
			    font-weight: 600;
			    margin: 0;
			    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
			}
			.product-match:hover {
			    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
			}
			.event_around-title{
				width: 100%;
						    color: #333;
						    font-size: 23px;
						    font-weight: 600;
						    margin-bottom: 20px;
						    text-align: left;
						    padding-left: 10px;
			}
			div.event_around{
				width: 100%;
				height: auto;
				margin: 30px auto;
				padding: 10px 0;
				border-top: 1px solid #eee;
				background-color: #fafafa;
			}
			.around-group{
				display: flex;				flex-wrap: wrap;				gap: 2px;				width: 100%;				padding: 0 10px;
			}
			.product-around{
				   flex: 1 0 calc((100% - 4 * 12px) / 5); 					min-width: 200px; 					height: 450px; 					position: relative;					border: 1px solid #eee;					border-radius: 4px; 					overflow: hidden;					background-color: #fff;
			}
			.product-around .img-container{
				width: 80%;
				height: 80%;
			}
			.product-around .img-container img{
				 width: 100%;				height: 450px;				object-fit: cover;				display: block;				transition: transform 0.3s;
			}
			.product-around .product_name{
				position: absolute;		    bottom: 115px;		    left: 0;		    width: 100%;		    text-align: center;		    color: #fff;		    font-size: 25px;		    font-weight: 600;		    margin: 0;		    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
			}
			.product-around .product_content{
				position: absolute;
				bottom: 72px;		    left: 0;		    width: 100%;		    text-align: center;		    color: #fff;		    font-size: 20px;		    margin: 0;		    text-shadow: 0 1px 2px rgba(0,0,0,0.3);		    white-space: nowrap;		    overflow: hidden;		    text-overflow: ellipsis;		    padding: 0 8px;
			}
			.product-around .product_price{
				 position: absolute;			    bottom: 20px;			    left: 0;			    width: 100%;			    text-align: center;			    color: #ff6700; /* 小米标准橙色，统一价格颜色 */			    font-size: 16px;			    font-weight: 600;			    margin: 0;			    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
			}
			.product-around:hover{
				box-shadow: 0 10px 20px rgba(0,0,0,0.1);
			}
			.event_peijian-title{
							width: 100%;
									    color: #333;
									    font-size: 23px;
									    font-weight: 600;
									    margin-bottom: 20px;
									    text-align: left;
									    padding-left: 10px;
						}
			div.event_peijian{
				width: 100%;		height: auto;		margin: 30px auto;		padding: 10px 0;		border-top: 1px solid #eee;		background-color: #fafafa;
			}
			.peijian-group{
				display: flex;		flex-wrap: wrap;		gap: 2px;		width: 100%;		padding: 0 10px;
			}
			.product-peijian{
				 flex: 1 0 calc((100% - 4 * 12px) / 5); 	    min-width: 200px; 	    height: 450px; 	    position: relative;	    border: 1px solid #eee;	    border-radius: 4px; 	    overflow: hidden;	    background-color: #fff;
			}
			.prodtct-peijian .img-container{
				width: 80%;
				height: 80%;
			}
			.product-peijian .img-container img{
				width: 100%;	    height: 450px;	    object-fit: cover;	    display: block;	    transition: transform 0.3s;
			}
			.product-peijian .product_name{
				position: absolute;		    bottom: 115px;		    left: 0;		    width: 100%;		    text-align: center;		    color: #333333;		    font-size: 25px;		    font-weight: 600;		    margin: 0;		    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
			}
			.product-peijian .product_content{
				position: absolute;
				 bottom: 72px;		    left: 0;		    width: 100%;		    text-align: center;		    color: #e0e0e0;		    font-size: 20px;		    margin: 0;		    text-shadow: 0 1px 2px rgba(0,0,0,0.3);		    white-space: nowrap;		    overflow: hidden;		    text-overflow: ellipsis;		    padding: 0 8px;
			}
			.product-peijian .product_price{
				 position: absolute;			    bottom: 20px;			    left: 0;			    width: 100%;			    text-align: center;			    color: #ff6700; 			    font-size: 16px;			    font-weight: 600;			    margin: 0;			    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
			}
			.product-peijian:hover{
				box-shadow: 0 10px 20px rgba(0,0,0,0.1);
			}
			
			div.hot-product{
				width: 100%;
				    height: auto;
				    margin: 30px auto;
				    padding: 20px 0;
				    border-top: 1px solid #eee;
				    background-color: #fafafa;
			}
			.hot-product-title{
				width: 100%;
				    color: #333;
				    font-size: 23px;
				    font-weight: 600;
				    margin-bottom: 20px;
				    text-align: left;
				    padding-left: 10px;
			}
			
			.hot-product-group{
				display: flex;
				    flex-wrap: nowrap; 
				    gap: 15px; 
				    width: 100%;
				    padding: 0 10px;
			}
			.product_hot-product{
				flex: 1; 
				    min-width: 250px;
				    height: auto; 
				    border: 1px solid #eee;
				    border-radius: 4px;
				    overflow: hidden;
				    background-color: #fff;
				    display: flex;
				    flex-direction: column; 
			}
			
			.product_hot-product .img-wrapper{
				width: 100%;
				height: 50%;
			}
			.product_hot-product .img-wrapper img{
				width: 100%;
				    height: 100%;
				    object-fit: cover;
				    display: block;
				    transition: transform 0.3s;
			}
			.product_hot-product .text-wrapper{
				width: 100%;
				    height: 65%; 
				    padding: 15px;
				    box-sizing: border-box;
			}
			.product_hot-product .product_name{
				color: #333333;
				    font-size: 18px;
				    font-weight: 600;
				    margin: 0 0 8px 0;
					
			}
			.product_hot-product .product_content{
				color: #b0b0b6;
				    font-size: 14px;
				    line-height: 1.5;
				    margin: 0 0 10px 0;
				    display: -webkit-box;
				    -webkit-line-clamp: 2; 
				    -webkit-box-orient: vertical;
				    overflow: hidden;
			}
			.product_hot-product .product_price{
				color: #333333;
				    font-size: 18px;
				    font-weight: 600;
				    margin: 0;
			}
			.product_hot-product:hover{
				box-shadow: 0 10px 20px rgba(0,0,0,0.1);
			}
			.product_hot-product:hover .img-wrapper img{
				transform: scale(1.05);
			}
			.reverse-match-title{
				width: 100%;
				    color: #333;
				    font-size: 23px;
				    font-weight: 600;
				    margin-bottom: 20px;
				    text-align: left;
				    padding-left: 10px;
			}
			div.reverse-match {
			    width: 100%;
			    height: auto;
			    margin: 30px auto;
			    padding: 20px 0;
			    border-top: 1px solid #eee; 
			}
			.reverse-match-group {
			    display: flex;
			    flex-wrap: nowrap; 
			    gap: 15px; 
			    width: 100%;
			    padding: 0 10px;
			}
			.reverse-product {
			    flex: 1; 
			    min-width: 250px;
			    height: 300px; 
			    border: 1px solid #eee;
			    border-radius: 4px;
			    overflow: hidden;
			    background-color: #fff;
			    display: flex;
			    flex-direction: column; 
			}
			.reverse-product .text-wrapper {
			    width: 100%;
			    height: 40%; 
			    padding: 15px;
			    box-sizing: border-box;
			}
			.reverse-product .product_name {
			    color: #333;
			    font-size: 18px;
			    font-weight: 600;
			    margin: 0 0 8px 0;
			}
			
			.reverse-product .product_content {
			    color: #333333;
			    font-size: 14px;
			    line-height: 1.5;
			    margin: 0 0 10px 0;
			    display: -webkit-box;
			    -webkit-line-clamp: 2; 
			    -webkit-box-orient: vertical;
			    overflow: hidden;
			}
			.reverse-product .product_price{
				color: #333;
				font-size: 18px;
				font-weight: 600;
				margin: 0
			}
			.reverse-product .img-wrapper img {
			    width: 50%;
			    height: 60%;
			    object-fit: cover;
			    display: block;
			    transition: transform 0.3s;
			}
			.reverse-product:hover {
			    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
			}
			
			.reverse-product:hover .img-wrapper img {
			    transform: scale(1.05);
			}
			
			div.produt_video{
				width: 100%;
				    height: auto;
				    margin: 30px auto;
				    padding: 20px 0;
				    border-top: 1px solid #eee; 
				    background-color: #fafafa;
			}
			.product_video-title{
				width: 100%;
				    color: #333;
				    font-size: 23px;
				    font-weight: 600;
				    margin-bottom: 20px;
				    text-align: left;
				    padding-left: 10px;
			}
			.product_video-group{
				display: flex;
				    flex-wrap: nowrap; 
				    gap: 15px; 
				    width: 100%;
				    padding: 0 10px;
			}
			
			.product-video{
				flex: 1; 
				    min-width: 250px;
				    height: auto;
				    border: 1px solid #eee;
				    border-radius: 4px;
				    overflow: hidden;
				    background-color: #fff;
				    display: flex;
				    flex-direction: column;
			}
			.product-video .img-wrapper{
				width: 100%;
				    height: 40%;
			}
			.product-video .img-wrapper img{
				width: 100%;
				    height: 100%;
				    object-fit: cover;
				    display: block;
				    transition: transform 0.3s;
				
			}
			
			.product-video .text-wrapper{
				width: 100%;
				    height: 40%;
				    padding: 15px;
				    box-sizing: border-box;
			}
			.product-video .product_name{
				color: #333;
				    font-size: 18px;
				    font-weight: 600;
				    margin: 0 0 8px 0;
			}
			.product-video .product_content{
				color: #333;
				    font-size: 14px;
				    line-height: 1.5;
				    margin: 0 0 10px 0;
				    display: -webkit-box;
				    -webkit-line-clamp: 2; 
				    -webkit-box-orient: vertical;
				    overflow: hidden;
			}
			.product_video .product_price{
				color: #ff6700;
				    font-size: 18px;
				    font-weight: 600;
				    margin: 0;
			}
			
			.product-video:hover {
			    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
			}
			
			.product-video:hover .img-wrapper img {
			    transform: scale(1.05);
			}